<html>
<head>
  <style>
  
    @import url(../+plus/plus.css);
        
    popup#test
    {
      background-color: gold;
      border:2dip solid red;
      width:100dip;
      height:auto;
    }
    
    div#anchor
    {
      border:1dip solid blue;
      width:50dip;
      height:50dip;
      cursor:pointer;
    }
  </style>  
  <style #actions>
    div#anchor
    {
      behavior: button; 
    }
  </style>    
  <script type="text/tiscript">
  
      // NOTE: this demo uses Plus bound Demo.list 
      
      namespace Demo 
      {
        var list = ["item"];
      
        function showPopup(anchor) 
        {
          var anchorPoint = 1; // left/bottom
          var popupPoint = 7;  // left/top
          anchor.popup( $(popup#test), (popupPoint << 16) | anchorPoint);
        }
        
        function addListItem() { 
          if( list.length > 10 ) 
            touchList = removeListItem; 
          else 
            list.push("new item");
        }
        function removeListItem() { 
          if( list.length <= 1 ) 
            touchList = addListItem; 
          else 
            list.pop();
        }
        
        var touchList = addListItem;
        
      }        
      
      self.timer(1s, function() { Demo.touchList(); return true; } );    
        
    </script>
  
</head>
<body model="Demo">

    <p>This sample demonstrates automatic/dynamic popup sizing when its content changes and height:auto is set.</p>
    <p>Click below to see popup changing once per second.</p>
    <div#anchor click="showPopup(this)">click me</div>
    <popup#test each="i,item in list">
      <div><(i)> - <(item)></div>
    </popup>
    

</body>
</html>